import React from "react";
import styles from "./index.module.less";
import SvgIcon from "@components/SvgIcon";
import { connect } from "react-redux";
import { selectItemNameShowChatHead } from "@redux/actions02";
import { useNavigate } from "react-router-dom";

const ChatHeadMould = (props) => {
    const { title } = props;

    const navigate = useNavigate();

    return (
        <div className={styles.chat_head_module}>
            <div className={styles.head_icon}>
                <div className={styles.at_top} title="置顶">
                    <SvgIcon font="icon-icon_zhiding" />
                </div>
                <div className={styles.in_min} title="最小化">
                    <SvgIcon font="icon-zuixiaohua" />
                </div>
                <div className={styles.in_max} title="最大化">
                    <SvgIcon font="icon-zuidahua-3-1" />
                </div>
                <div
                    className={styles.close}
                    title="关闭"
                    onClick={() => {
                        navigate("/");
                    }}
                >
                    <SvgIcon font="icon-guanbi" />
                </div>
            </div>
            <p className={styles.user_name}>{title || ""}</p>
        </div>
    );
};

export default connect(
    (state) => ({ title: state.selectItemNameShowChatHeadReducer }),
    { selectItemNameShowChatHead }
)(ChatHeadMould);
